let echarts = require('echarts/lib/echarts')
let elementResizeDetectorMaker = require("element-resize-detector")

export default {
  barEchart: function (id, data) {
    let option = {
      color: ['#2391FF', '#1cc238', '#FFDF25', '#F45D41', '#B06AF7', '#4AEAB0'],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        right: '5%',
        textStyle: {
          color: "#ffffff"
        },
      },
      calculable: true,
      grid: {
        left: "7%",
        bottom: "15%",
        top: "15%",
        width: "90%"
      },
      xAxis: [
        {
          type: 'category',
          data: data.xData,
          axisLine: {
            lineStyle: {
              color: "#ffffff"
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: "单位（kW·h）",
          splitLine: {
            lineStyle: {
              color: "rgba(26,139,170,0.29)"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff"
            }
          },
        }
      ],
      series: [
        {
          type: 'bar',
          data: data.seriesData1,
        }
      ]
    };

    let chartDom = echarts.getInstanceByDom(document.getElementById(id))
    if (chartDom == undefined) {
      chartDom = echarts.init(document.getElementById(id));
    }

    chartDom.setOption(option)

    window.addEventListener('resize', () => {
      chartDom.resize()
    })
    let erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById(id), function (element) {
      chartDom.resize()
    })
    return chartDom
  },
  pieEchart: function (id, data) {
    let option = {
      color: ['#2391FF', '#1cc238', '#FFDF25', '#F45D41', '#B06AF7', '#4AEAB0'],
      tooltip: {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        y: 'center',
        right: '1%',
        textStyle: {
          color: '#fff',
        },
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '50%',
          data:data,
          center: ['35%', '50%'],
          label: {
            show: true,
            formatter: '{d}%',
            color: '#fff',
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        }
      ]
    };

    let chartDom = echarts.getInstanceByDom(document.getElementById(id))
    if (chartDom == undefined) {
      chartDom = echarts.init(document.getElementById(id));
    }

    chartDom.setOption(option)

    window.addEventListener('resize', () => {
      chartDom.resize()
    })
    let erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById(id), function (element) {
      chartDom.resize()
    })
    return chartDom
  },
}
